<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#progess{
				height: 30px;
				width: 100%;
				background: gray;
			}
			#bar{
				width: 1%;
				height: 30px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="progess">
			<div id="bar"></div>
		</div>
		<br />
		<button id="btn">点击</button>
	</body>
	<script>
		var btn=document.getElementById('btn');
		var bar=document.getElementById('bar')
		btn.onclick=function(){
			var time=setInterval(myfun,30);
			var width=1;
		
			function myfun(){
				if(width>=100){
					clearInterval(timer);
				}else{
					width=width+3;
					bar.style.width=width+'%';
				}
			}
		}
	</script>
</html>
